<ol class="breadcrumb" breadcrumb="">
  <li class="breadcrumb-item ng-scope active"><span>Models</span></li>
</ol>
<div class="container-fluid">
  <div class="animated fadeIn">
    <div class="row">
      <div class="col-sm-12">
        <div class="alert alert-{{message.type}}" role="alert" ng-show="message.text !== ''">
          {{message.text}}
        </div>
        <div class="card">
          <div class="card-block">
            <div class="form-group row">
              <label for="select" class="col-sm-2 col-form-label">Bot</label>
              <div class="col-sm-10">
                <select id="bot_name" ng-change="getData(bot.bot_id)" ng-options="bot.bot_id as bot.bot_name for bot in botList" ng-model="bot.bot_id" class="form-control">
                  <option value="">Please select one</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-12">
        <div class="card">
          <div class="card-header">
            <strong>Currently Loaded Model</strong>
          </div>
          <div class="card-block">
            <div>
              <json-formatter json="config" open="4"></json-formatter>
            </div>
          </div>
          <div class="card-footer">
            <button type="button" class="btn btn-danger" ng-click="unloadRasaModel()"><i class="fa fa-magic"></i>&nbsp;
              Unload Model</button>
          </div>
        </div>
      </div>
    </div>



    <div class="row" ng-show="selectedBot">
      <div class="col-sm-12">
        <div class="card">
          <div class="card-header">
            <strong>Models</strong>
            <span class="float-right">
              <a class="btn btn-ghost-primary" href="#/models/{{ bot.bot_id }}/add" data-toggle="tooltip" data-placement="top" title="Click to Add a Model" tooltip><i class="icon-plus"></i></a>
            </span>
          </div>
          <div class="card-block">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th>Create Date/Time</th>
                  <th>File</th>
                  <th>Comment</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr dir-paginate="model in modelList | itemsPerPage: 10" pagination-id="modelList">
                  <td>{{ model.timestamp }}</td>
                  <td>File: {{ model.model_name }}<br>Local Path: {{ model.local_path }}<br>Rasa Server Path: {{ model.server_path }}</td>
                  <td>{{ model.comment }}</td>
                  <td>
                    <button class="btn btn-outline-secondary" ng-click="loadRasaModel(model.server_path)">
                      <span class="icon-energy"></span>
                    </button>
                    <button class="btn btn btn-outline-danger" confirm-click-title="Delete Model" confirm-click="Are you sure? This will delete local model." ng-click="deleteModel(model.model_id)">
                      <span class="icon-trash"></span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div style="float:right">
              <dir-pagination-controls pagination-id="modelList"></dir-pagination-controls>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>